<template>
	<div >
		<label>输入音量值：</label><input v-model.number="vol">
	    <label>输入滑杆的长度：</label><input v-model.number="sliderWidth">
	    <br>
	    <label>选择滑块滑过的颜色：</label><input type="color" v-model='slipedColor'>
	    <label>选择滑块的颜色：</label><input type="color" v-model='slipColor'>
	    <hr>
	    <Slider v-model="vol" :sliped-color='slipedColor' :slip-color='slipColor' :slider-width='sliderWidth'></Slider>
	</div>
</template>

<script>
	import Slider from '../components/Slider'
	export default {
		data:function(){
			return{
				vol:0.5,
                slipedColor:'#ff0000',
                slipColor:'#00ff00',
                sliderWidth:360,
			}
       	},
       	components:{
       		Slider,
       	}
	}
</script>

<style scoped>
	div{
		padding: 15px;
	}
</style>